<template>
    <div class='perio'>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="handleAdd" v-hasPermi="['system:menu:add']" >新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable='getdata'></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="tabelList" >
            <template v-for="(item,inx) in columnlist">
                <template v-if='item.prop == "academyId"'>
                    <el-table-column :label="item.label" min-width='100' align='center' :key='inx' >
                        <template slot-scope="scope">
                            <div> {{scope.row.academyId}}区 </div>
                        </template>
                    </el-table-column>
                </template>
                <template v-else>
                    <el-table-column :prop="item.prop" :label="item.label" min-width='100' align='center' :key='inx' :show-overflow-tooltip='item.showtioop'></el-table-column>
                </template>
            </template>
            <el-table-column align="center" width='100' fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="editItem(scope.row)" type='text'>编辑</el-button>
                    <el-button @click="delItem(scope.row)" type='text'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align:right;margin-top:20px;" v-if='queryParams.total>0'>
            <el-pagination background layout="prev, pager, next" @current-change="handleQuery" :current-page.sync="queryParams.pageNum" :page-size="queryParams.pageSize" :total="queryParams.total"> </el-pagination>
        </div>
        <mydialog :dialogTitle='dialogTitle' @handleClose='setShowDialog' @serve='serve' :show='showDialog'>
            <template slot="cont">
                <div class="mycont">
                    <el-form :model="ruleForm" label-width="120px" :rules="rules" ref="myRuleForm">
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="所属一级科目" prop='subjectId'>
                                    <el-select v-model="ruleForm.subjectId" @change="settherrArr" placeholder="请选择一级科目">
                                        <el-option v-for="item in towArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="中科院分区" prop='academyId'>
                                    <el-select v-model="ruleForm.academyId" placeholder="请选择分区">
                                        <el-option v-for="item in fqArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item label="录取周期" prop='enrollPeriod'>
                                    <el-input v-model="ruleForm.enrollPeriod" maxlength="200" placeholder="(示例:3~4个月)"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item label="影响因子" class="is-required" prop='impactFactor'>
                                    <el-input v-model="ruleForm.impactFactor" maxlength="10" placeholder="(示例:2.5)" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                             <el-col :span='12'>
                                <el-form-item class="is-required" label="分数" prop='score'>
                                    <el-input v-model="ruleForm.score" maxlength="10" placeholder="(示例:1,2,3,4,5)"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="评估通过率" prop='hotRate'>
                                    <el-input v-model="ruleForm.hotRate" maxlength="10" placeholder="请填写"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="已录用数量" prop='employNum'>
                                    <el-input v-model="ruleForm.employNum" maxlength="10" placeholder="请填写数字"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="总评估量" prop='reviewTotal'>
                                    <el-input v-model="ruleForm.reviewTotal" maxlength="10" placeholder="请填写数字"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="总投稿量" prop='submitTotal'>
                                    <el-input v-model="ruleForm.submitTotal" maxlength="10" placeholder="请填写数字"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="jcr分区" prop='jcr'>
                                    <el-select v-model="ruleForm.jcr" placeholder="请选择">
                                        <el-option v-for="item in jcrfqArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="录用率" prop='selfUse'>
                                    <el-input v-model="ruleForm.selfUse" maxlength="10" placeholder="请填写数字"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="初/终审周期" prop='searchType'>
                                    <el-input v-model="ruleForm.searchType" maxlength="10" placeholder="请填写数字"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item class="is-required" label="发表量" prop='submitingNum'>
                                    <el-input v-model="ruleForm.submitingNum" maxlength="10" placeholder="请填写数字"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item label="发刊时间">
                                     <el-date-picker v-model="ruleForm.publishTime" type="year" value-format="yyyy" format="yyyy" placeholder="选择年"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item label="发刊国家">
                                    <el-select v-model="ruleForm.publishCountry" @change="setpublishCountryName" filterable placeholder="请选择国家">
                                        <el-option v-for="item in countryData" :key="item.value" :title="item.name" :label="item.name" :value="item.code"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item label="是否oa">
                                    <el-switch v-model="ruleForm.oaFlag"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item label="是否预警">
                                    <el-switch v-model="ruleForm.warningFlag"></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span='12'>
                                <el-form-item label="国人占比" placeholder="请填写" maxlength="10">
                                    <el-input v-model="ruleForm.compatriotsUse"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span='12'>
                                <el-form-item label="期刊编号" placeholder="请填写期刊编号" maxlength="10">
                                    <el-input v-model="ruleForm.journalNo"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row >
                            <el-col :span='24'>
                                <el-form-item label="期刊介绍" placeholder="请填写期刊介绍" maxlength="10">
                                <el-input v-model="ruleForm.remark" maxlength="500" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <div class="remarkbox"> 期刊介绍 </div>
                            <el-col :span='24'>
                                <el-input v-model="ruleForm.remark" maxlength="500" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                            </el-col> -->
                             <!-- <editor v-model="ruleForm.remark" :min-height="192"/> -->
                        </el-row>
                    </el-form>
                </div>
            </template>
        </mydialog>
    </div>
</template>
<script>
import {selectJournalInfos,selectAcademyInfos,selectJcrInfos,deleteJournalInfo,updateJournalInfo,addJournalInfo,selectSubjectInfos,getByJournalId } from "@/api/pc.js";
import {getnation} from "@/utils/nation.js"
export default {
    name:'perio',
    data(){
       return{
        queryParams:{
            pageNum:1,pageSize:10,total:0
        },//期刊搜索条件
        statusArr:[
            {label:'未发布',value:'1' },
            {label:'服务中',value:'2' },
            {label:'已结束',value:'3' },
        ],//期刊状态
        showSearch:true,//展示搜索条件
        loading:false,//tabel的loading
        tabelList:[], //初始化数组
        columnlist:[
            {isnum:false, label:'期刊编号', prop:'journalNo'},
            {isnum:false, label:'所属一级科目', prop:'subjectName',showtioop:true},
            {isnum:false, label:'中科院分区', prop:'academyId'},
            {isnum:false, label:'JCR分区', prop:'jcrName'},
            {isnum:false, label:'录取周期', prop:'enrollPeriod'},
            {isnum:true, label:'影响因子', prop:'impactFactor'},
            {isnum:true, label:'分数', prop:'score'},
            {isnum:true, label:'评估通过率', prop:'hotRate'},
            {isnum:true, label:'已录用数量', prop:'employNum'},
            {isnum:true, label:'总评估量', prop:'reviewTotal'},
            {isnum:true, label:'总投稿量', prop:'submitTotal'},
            {isnum:false, label:'发刊时间', prop:'publishTime'},
            {isnum:false, label:'发刊国家', prop:'publishCountry'},
            {isnum:false, label:'国人占比', prop:'compatriotsUse'},
            {isnum:false, label:'期刊状态', prop:'stateName'},
            {isnum:true, label:'发表量', prop:'submitingNum'},
            {isnum:true, label:'录用率', prop:'selfUse'},
            {isnum:false, label:'初/终审周期', prop:'searchType'},
        ],//表格的头部信息
        dialogTitle:'',//弹窗的标题
        showDialog:false,//弹窗的变量
        ruleForm:{
            journalId:'',//期刊编号
            subjectId:'',//所属一级科目
            jcr:'',//jcr分区
            subjectIds:null, //所属的三级科目
            publishTime:'',//发刊时间
            publishCountry:'cn',//发刊国家
            publishCountryName:'中国',//发刊国家
            oaFlag:false,//是否oa
            impactFactor:'',//影响因子
            academyId:'',//中科院分区
            journalNo:'',//不传
            enrollPeriod:'',//录取周期
            enrollRate:'1',//录取率
            warningFlag:false,//是否预警
            searchType:'',//检索类型
            endTime:'',//截稿时间
            articleNum:'1',//文章数量
            compatriotsUse:'',//国人占比
            selfUse:'',//自引率
            score:'',//分数
            hotRate:'',//评估通过率
            passRate:'1',//录用率
            reviewTotal:'',//总预设数
            reviewPass:'1',//预审通过量
            reviewPassRate:0,//初/终审周期
            submitTotal:'',//总投稿量
            submitingNum:'1',//投稿中数量
            employNum:'',//已录用数量
            comments:'',//佩普评语
            commentsTime:'',//点评时间
            remark:'',//备注
        },
        towname:'',//二级分类的选中值
        fqArr:[],//分区
        jcrfqArr:[],//jcr分区
        towArr:[],//二级分类列表
        therrArr:[],//三级分类列表 - 偏重研究
        countryData:getnation(),
        rules: {
            subjectId: [{ required: true, message: '请选择二级分类', trigger: 'change' },],
            academyId: [{ required: true, message: '请选择中科院分区', trigger: 'change' },],
            enrollPeriod: [{ required: true, message: '请输入录取周期', trigger: 'blur' }],
            // impactFactor: [{ required: true, message: '请输入影响因子', trigger: 'blur' }],
            score: [{ required: true, message: '请输入0-5的整数', trigger: 'blur' },],
            hotRate: [{ required: true, message: '请输入热度', trigger: 'blur' }],
            employNum: [{ required: true, message: '请输入已录用数量', trigger: 'blur' }],
            reviewTotal: [{ required: true, message: '请输入总预设数', trigger: 'blur' }],
            submitTotal: [{ required: true, message: '请输入总投稿量', trigger: 'blur' }],
            jcr: [{ required: true, message: '请选择二级分类', trigger: 'change' },],
            selfUse: [{ required: true, message: '请输入录用率', trigger: 'blur' }],
            searchType: [{ required: true, message: '请输入初/终审周期', trigger: 'blur' }],
            submitingNum: [{ required: true, message: '请输入发表量', trigger: 'blur' }],
        }
       }
    },
    created(){
        this.getdata();//获取数组
        this.getfqdata();//获取分区数组
        this.getjcrfqdata();//获取分区数组
        this.gettowArr(); //获取所属二级分了
        // this.gettherrArr(); //获取所属二级分了
    },
    methods:{
        //获取二级分类
        gettowArr(){
            var formData = new FormData();
            formData.append('subjectType',1)
            selectSubjectInfos(formData).then(res=>{
                this.towArr = res.rows.map(it=>{return {label:it.subjectName,value:it.subjectId}});
            })
        },
        settherrArr(val){
            var formData = new FormData();
            formData.append('subjectType',3)
            formData.append('subjectId',val)
            selectSubjectInfos(formData).then(res=>{
                this.therrArr = res.rows.map(it=>{return {label:it.subjectName,value:it.subjectId}});
            })
        },
        gettherrArr(){
            var formData = new FormData();
            formData.append('subjectType',3)
            selectSubjectInfos(formData).then(res=>{
                this.therrArr = res.rows.map(it=>{return {label:it.subjectName,value:it.subjectId}});
            })
        },
        //编辑
        editItem(val){
            getByJournalId({journalId:val.journalId}).then(res=>{
                console.log(res)
                this.ruleForm = res.data;
                this.ruleForm.score = this.ruleForm.score * 1;
                this.ruleForm.endTime = this.ruleForm.endTime=='长期有效'?'':this.ruleForm.endTime;
                if(this.ruleForm.subjectId){
                    this.settherrArr(this.ruleForm.subjectId)
                }
                this.ruleForm.subjectIds = this.ruleForm.subjectIds[0];
                this.dialogTitle = '编辑期刊';
                this.showDialog = true;
            })
        },
        //删除
        delItem(val){
            this.$confirm('此操作将永久删除该期刊, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteJournalInfo({journalId:val.journalId}).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.$message.success('删除成功！')
                        this.getdata();
                    }else{
                        this.$message.warning(res.msg)
                    }
                }).catch(err=>{console.log(err)})
            }).catch(() => { });
            
        },
        // 获取分区列表
        getfqdata(){
            selectAcademyInfos().then(res=>{
                if(res.code==200){
                    console.log(res)
                    this.fqArr = res.data.map(it=>{return {label:it.academyName,value:it.academyId}});
                }
            })
        },
        // 获取分区列表
        getjcrfqdata(){
            selectJcrInfos().then(res=>{
                if(res.code==200){
                    console.log(res)
                    this.jcrfqArr = res.data.map(it=>{return {label:it.jcrName,value:it.jcrId}});
                }
            })
        },
        //获取当前数组
        getdata(){
            var formData = new FormData();
            formData.append('pageNum',this.queryParams.pageNum)
            formData.append('pageSize',this.queryParams.pageSize)
            selectJournalInfos(formData).then(res=>{
                if(res.code==200){
                    console.log(res)
                    res.rows.forEach(it=>{
                        it.stateName = it.state==1?'有效':'无效'
                    })
                    this.tabelList = res.rows;
                    this.queryParams.total = res.total || 0;
                }   
            })
        },
        //搜索
        handleQuery(){
            this.getdata();
        },
        //重置
        resetQuery(){
            this.getdata();
        },
        // 调整国家名称
        setpublishCountryName(val){
            this.ruleForm.publishCountryName = this.countryData.filter(it=>{return it.code == val})[0].name;
        },
        //新增
        handleAdd(){
            this.showDialog=true;
            this.dialogTitle = '创建期刊';
            this.ruleForm = {
                journalId:'',//期刊编号
                subjectId:'',//所属一级科目
                jcr:'',//jcr分区
                publishTime:'',//发刊时间
                publishCountry:'cn',//发刊国家
                publishCountryName:'中国',//发刊国家
                oaFlag:false,//是否oa
                impactFactor:'',//影响因子
                academyId:'',//中科院分区
                journalNo:'',//不传
                enrollPeriod:'',//录取周期
                enrollRate:'1',//录取率
                warningFlag:false,//是否预警
                searchType:'',//检索类型
                endTime:'',//截稿时间
                articleNum:'1',//文章数量
                compatriotsUse:'',//国人占比
                selfUse:'1',//自引率
                score:'',//分数
                hotRate:'',//评估通过率
                passRate:'',//录用率
                reviewTotal:'',//总预设数
                reviewPass:'1',//预审通过量
                reviewPassRate:'1',//初/终审周期
                submitTotal:'',//总投稿量
                submitingNum:0,//投稿中数量
                employNum:'',//已录用数量
                comments:'',//佩普评语
                commentsTime:'',//点评时间
            }
            setTimeout(() => {
                this.$refs.myRuleForm.resetFields();
            }, 200);
        },
        //关闭弹窗
        setShowDialog(){
            this.showDialog=false;
        },
        //点击确定
        serve(){
            this.$refs['myRuleForm'].validate((valid) => {
                if (valid) {
                    for(var i=0;i< this.columnlist.length;i++){
                        var it = this.columnlist[i];
                        if(it.isnum){
                            var reg=/^[0-9]*$/;//正则表达式
                            var texst = new RegExp(reg);
                            if(it.label=='影响因子'||it.label=='录用率'){
                                if(!this.ruleForm[it.prop]){
                                    return this.$message.warning('请填写' + it.label)
                                }
                                console.log(this.ruleForm[it.prop])
                                console.log(texst.test(this.ruleForm[it.prop]))
                                reg = /^\d*(\.\d{1,3})?$/;
                                texst = new RegExp(reg);
                                if(!texst.test(this.ruleForm[it.prop])){
                                    return this.$message.warning(it.label +  '请填写数字类型且保留三位小数的内容')
                                }
                            }else{
                                if(!texst.test(this.ruleForm[it.prop])){
                                return this.$message.warning(it.label +  '请填写数字类型的内容')
                                }
                            }
                        }
                    }
                    if(this.dialogTitle == '编辑期刊'){
                        let obj = {...this.ruleForm,subjectIds:this.ruleForm.subjectIds?[this.ruleForm.subjectIds]:null,}
                        updateJournalInfo(obj).then(res=>{
                            if(res.code==200){
                                this.$message.success('编辑成功!');
                                this.getdata();
                                this.showDialog=false;
                            }
                        }).catch(err=>{console.log(err)})
                    }else{
                        let obj = {...this.ruleForm,subjectIds:this.ruleForm.subjectIds?[this.ruleForm.subjectIds]:null,}
                        addJournalInfo(obj).then(res=>{
                            if(res.code==200){
                                this.$message.success('添加成功!');
                                this.getdata();
                                this.showDialog=false;
                            }
                        }).catch(err=>{console.log(err)})
                    }
                
            } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang='scss' scoped>
.perio{
    width: 100%;
    height: 100%;
    padding: 20px;
}
.mycont{
    width: 100%;
    height: calc(80vh - 167px);
    overflow: auto;
    padding-right: 20px;
}
.remarkbox{
    font-size: 14px;
    color:#606266;
    font-weight: 600;
    float: left;
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    height: 40px;
    line-height: 0px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: -20px;
}
</style>
<style scoped>
/deep/.dialogBox .el-dialog{
    width: 740px;
    height: 80vh;
}
/deep/.el-date-editor, /deep/.el-input, /deep/.el-select-dropdown__wrap {
    width: 200px;
}
</style>